<template>
    <el-dialog title="编辑考勤" v-model="EditLeaveDialogVisible" width="60%" :close-on-click-modal="false"
        :show-close="false" :close-on-press-escape="false">
        <el-form :model="leaveForm" ref="leaveFormRef" label-width="100px"
            :style="{ 'max-height': '50vh', 'overflow-y': 'auto' }">
            <!-- 考勤日期 -->
            <!-- <el-form-item label="考勤日期" :rules="[{ required: true, message: '请输入考勤日期', trigger: 'blur' }]">
                <el-date-picker v-model="leaveForm.attendance_date" placeholder="请选择考勤日期"
                    type="date"></el-date-picker>
            </el-form-item> -->

            <!-- 签到时间 -->
            <el-form-item label="签到时间" :rules="[{ required: true, message: '请输入签到时间', trigger: 'blur' }]">
                <el-time-picker v-model="leaveForm.check_in_time" type="time" placeholder="请选择签到时间" format="HH:mm:ss"
                    value-format="HH:mm:ss" />
            </el-form-item>

            <!-- 签退时间 -->
            <el-form-item label="签退时间" :rules="[{ required: true, message: '请输入签退时间', trigger: 'blur' }]">
                <el-time-picker v-model="leaveForm.check_out_time" type="time" placeholder="请选择签退时间" format="HH:mm:ss"
                    value-format="HH:mm:ss" />
            </el-form-item>

            <!-- 状态 -->
            <!-- <el-form-item label="考勤状态" :rules="[{ required: true, message: '请选择考勤状态', trigger: 'blur' }]">
                <el-select v-model="leaveForm.status" placeholder="请选择考勤状态">
                    <el-option label="早退" value="早退"></el-option>
                    <el-option label="出勤" value="出勤"></el-option>
                    <el-option label="迟到" value="迟到"></el-option>
                    <el-option label="缺勤" value="缺勤"></el-option>
                </el-select>
            </el-form-item> -->
        </el-form>
        <!-- 底部按钮 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancleDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { updateData } from "../../../api/api"

const props = defineProps({
    EditLeaveDialogVisible: {
        type: Boolean,
        default: false
    },
    leaveForm: {
        type: Object,
        default: {}
    }
})

const EditLeaveDialogVisible = ref(props.EditLeaveDialogVisible)
watch(() => props.EditLeaveDialogVisible, (newVal) => {
    EditLeaveDialogVisible.value = newVal
})
watch(() => props.leaveForm, (newVal) => {
    leaveForm.value = newVal

})

const emit = defineEmits<{ (event: string): void }>()
const cancleDialog = () => {
    emit("closeDialog")
}
// 员工表单数据
let leaveForm = ref(props.leaveForm)



// 提交表单
const submitForm = async () => {
    const data = {
        employee_id: leaveForm.value.employee_id,
        attendance_date: leaveForm.value.attendance_date,
        check_in_time: leaveForm.value.check_in_time,
        check_out_time: leaveForm.value.check_out_time,
    }

    const res = await updateData(`/attendance`, data)
    emit("closeDialog")
    emit("refreshPage")
    console.log("res", res);

};
function formatDateToYYYYMMDD(date: string) {
    if (!date) return null; // 如果没有传入日期，返回null

    const d = new Date(date); // 创建日期对象
    const year = d.getFullYear(); // 获取年份
    const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份，并确保是两位数
    const day = String(d.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

    return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
}
</script>
<style scoped lang="scss"></style>